<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.waterfall.js" ></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A Waterfall chart with Grow effect</title>

    <meta name="description" content="A waterfall chart using the Grow effect" />
</head>
<body>

    <h1>A Waterfall chart with Grow effect</h1>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    <script>
        window.onload = function ()
        {
            waterfall1 = new RGraph.Waterfall('cvs', [50,12,-50,-19, -130, -30])
            waterfall1.Set('chart.background.grid.autofit', true);
            waterfall1.Set('chart.background.grid.autofit.numhlines', 10);
            waterfall1.Set('chart.background.grid.autofit.numvlines', 14);
            waterfall1.Set('chart.title', 'A chart showing income/expenditure');
            waterfall1.Set('chart.colors', ['black','red','blue']);
            waterfall1.Set('chart.strokestyle', 'white');
            waterfall1.Set('chart.units.pre', '$');
            waterfall1.Set('chart.units.post', 'k');
            waterfall1.Set('chart.total', true);
            waterfall1.Set('chart.labels', ['Sales', 'Misc', 'Wages','Fees','Supplies','Food','Gross']);
            waterfall1.Set('chart.tooltips', ['Total sales of product and services rendered',
                                              'Miscellaneous income',
                                              'Wages provided to the staff',
                                              'Fees (eg bank, transaction)',
                                              'Supplies to the office and daily running costs',
                                              'Food to keep the staff alive and running at peak efficiency',
                                              'Gross income before any taxes have been paid']);
            waterfall1.Set('chart.highlight.stroke', 'rgba(0,0,0,0)');
            waterfall1.Set('chart.shadow', navigator.userAgent.indexOf('Firefox') == -1); // In Firefox this seriously slows down the Grow animation
            waterfall1.Set('chart.shadow.color', '#aaa');
            waterfall1.Set('chart.shadow.blur', 5);
            waterfall1.Set('chart.shadow.offsetx', 0);
            waterfall1.Set('chart.shadow.offsety', 0);
            waterfall1.Set('chart.gutter.left', 50);
            waterfall1.Set('chart.xaxispos', 'center');
            RGraph.Effects.Waterfall.Grow(waterfall1);
        }
    </script>

    <p>        
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>